<template>
  <div class="audit_module_wrap">
    <el-card class="audit_appointment_query_card">
      <!-- 查询表单 -->
      <div class="select_form_box">
        <el-form :inline="true" style="height: 30px" :model="queryAppointmentFormData" class="demo-form-inline">
          <el-form-item>
            <template #label>
              <i class="iconfont icon-xingming" style="font-size: 19px"></i>
              <span>学生姓名</span>
            </template>
            <el-input style="width: 130px" v-model="queryAppointmentFormData.studentName" placeholder="学生姓名" clearable />
          </el-form-item>
          <el-form-item>
            <template #label>
              <i class="iconfont icon-gonghao" style="font-size: 19px"></i>
              <span>学生工号</span>
            </template>
            <el-input style="width: 150px" v-model="queryAppointmentFormData.studentCode" placeholder="学生工号" clearable />
          </el-form-item>

          <el-form-item>
            <template #label>
              <i class="iconfont icon-shijianriqi"></i>
              <span>预约时间</span>
            </template>
            <!-- <el-date-picker
              v-model="queryAppointmentFormData.date"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择预约日期"
              clearable
            /> -->
            <el-date-picker
              v-model="queryAppointmentFormData.date"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>

          <el-form-item>
            <template #label>
              <i class="iconfont icon-shiyanshiguanli" style="font-size: 17px"></i>
              <span>实验室房间号</span>
            </template>
            <el-input
              style="width: 144px"
              v-model="queryAppointmentFormData.reservationHome"
              placeholder="实验室房间号"
              clearable
            />

            <!-- <el-select
              v-model="queryAppointmentFormData.reservationHome"
              filterable
              placeholder="请选择"
              style="width: 120px"
              clearable
            >
              <el-option v-for="(ll, indexL) in labList" :key="indexL" :label="ll.laboratoryHome" :value="ll.laboratoryHome" />
            </el-select> -->
          </el-form-item>

          <el-form-item>
            <template #label>
              <i class="iconfont icon-yiqihecha" style="font-size: 19px"></i>
              <span>预约仪器</span>
            </template>
            <el-input style="width: 200px" v-model="queryAppointmentFormData.reservationDev" placeholder="预约仪器" clearable />
            <!-- <el-select
              v-model="queryAppointmentFormData.reservationDev"
              filterable
              placeholder="请选择仪器"
              style="width: 220px"
              clearable
            >
              <el-option v-for="(dl, indexD) in devList" :key="indexD" :label="dl.label" :value="dl.value" />
            </el-select> -->
          </el-form-item>
          <el-form-item>
            <template #label>
              <i class="iconfont icon-shenhe" style="font-size: 17px"></i>
              <span>审核状态</span>
            </template>
            <!-- <el-input style="width: 200px" v-model="queryAppointmentFormData.studentCode" placeholder="学生工号" clearable /> -->
            <el-select
              v-model="queryAppointmentFormData.checkResult"
              filterable
              placeholder="请选择状态"
              style="width: 120px"
              clearable
            >
              <el-option v-for="(csl, indexC) in checkStatusList" :key="indexC" :label="csl.label" :value="csl.value" />
            </el-select>
          </el-form-item>

          <el-form-item style="margin-right: 20px">
            <el-button type="primary" :icon="Search" @click="selectAppointmentClick">查询</el-button>
            <!-- 操作按钮 -->
            <div class="action_box">
              <el-button type="success" :icon="UploadFilled" @click="exportDataClick">导出</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 表格卡片 -->
    <el-card class="appoint_table_card">
      <!-- size="small" -->
      <el-table style="width: 100%" :data="appointList" :loading="isAppointListLoading" stripe :scrollbar-always-on="true">
        <el-table-column prop="studentName" label="学生姓名" align="center" width="80" />
        <el-table-column prop="studentCode" label="学生工号" width="140" align="center" />
        <el-table-column prop="studentPhone" label="学生手机号" width="100" align="center" />
        <el-table-column prop="startTime" label="开始时间" align="center" width="180" />
        <el-table-column prop="endTime" label="结束时间" align="center" width="180" />
        <el-table-column prop="reservationHome" label="房间号" align="center" width="120" />
        <el-table-column prop="reservationDev" label="预约仪器" align="center" width="180"> </el-table-column>
        <el-table-column prop="chemicalsAppointUses" label="化学药品" align="center">
          <template #default="scope">
            <el-link type="primary" class="look_link" @click="lookDrugClick(scope.row)">
              <i class="iconfont icon-ziyuan"></i>
              <span class="look_link_text">查看药品</span>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="experimentalSchemeDocs" label="实验方案" align="center">
          <template #default="scope">
            <el-link
              v-if="
                scope.row.experimentFileUrl != '' &&
                scope.row.experimentFileUrl != null &&
                scope.row.experimentFileUrl != undefined
              "
              type="primary"
              class="look_link"
              @click="lookDocClick(scope.row)"
            >
              <i class="iconfont icon-wenjian"></i>
              <span class="look_link_text">下载文档</span>
            </el-link>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="studentType" label="学生类型" width="80" align="center" />
        <el-table-column prop="experimentType" label="实验类型" width="80" align="center" />
        <el-table-column prop="mentorName" label="导师姓名" align="center" width="80" />
        <el-table-column prop="sameGroupStudents" label="学生名单" align="center">
          <template #default="scope">
            <el-link type="primary" class="look_link" @click="lookStudentsClick(scope.row)">
              <i class="iconfont icon-view-people"></i>
              <span class="look_link_text">查看名单</span>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.checkResult == 0" type="warning">待审核</el-tag>
            <el-tag v-if="scope.row.checkResult == 1" type="success">通过</el-tag>
            <el-tag v-if="scope.row.checkResult == 2" type="danger">不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="操作" align="center" width="80">
          <template #default="scope">
            <el-button
              size="small"
              color="#626aef"
              class="check_btn"
              plain
              @click="checkBtnClick(scope.row)"
              :disabled="scope.row.checkResult == 1 || scope.row.checkResult == 2"
            >
              <i class="iconfont icon-shenhe"></i> 审核
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          class="tab_pagination"
          background
          layout="prev, pager, next"
          v-model:current-page="queryAppointmentFormData.page"
          v-model:page-size="queryAppointmentFormData.size"
          :total="tableTotal"
          @change="paginationChange"
        />
      </div>
    </el-card>

    <!-- 查看化学药品预约使用名单弹窗 -->
    <el-dialog
      v-model="isShowLookChemicalDrugsDialog"
      title="化学药品预约使用名单"
      width="800"
      @close="lookChemicalDrugsDialogCloseClick"
    >
      <div class="look_chemical_dialog_box">
        <el-table :data="currentShowLookChemicalDrugs" border stripe size="small" style="width: 100%">
          <el-table-column property="num" label="序号" bordered width="80" align="center">
            <template #default="scope">
              <span>{{ scope.row.num + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column property="chemicalName" label="药品名称" align="center" />
        </el-table>
        <div class="look_chemical_dialog_pagination_box">
          <el-pagination
            size="small"
            class="tab_pagination"
            background
            layout="prev, pager, next"
            v-model:current-page="currentLookChemicalDrugsPage"
            :page-size="10"
            :total="currentLookChemicalDrugs.length"
            @change="lookChemicalPaginationChange"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 查看学生名单弹窗 -->
    <el-dialog v-model="isShowLookAllStudentDialog" title="学生名单" width="800" @close="lookAllStudentDialogCloseClick">
      <div class="look_chemical_dialog_box">
        <el-table :data="currentShowLookAllStudent" border stripe size="small" style="width: 100%">
          <el-table-column property="num" label="序号" bordered width="80" align="center">
            <template #default="scope">
              <span>{{ scope.row.num + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column property="studentNum" label="学号" align="center" />
          <el-table-column property="studentName" label="姓名" align="center" />
          <el-table-column property="studentPhone" label="手机号" align="center" />
        </el-table>
        <div class="look_chemical_dialog_pagination_box">
          <el-pagination
            size="small"
            class="tab_pagination"
            background
            layout="prev, pager, next"
            v-model:current-page="currentLookAllStudentPage"
            :page-size="10"
            :total="currentLookAllStudent.length"
            @change="lookAllStudentPaginationChange"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 审核预约弹窗 -->
    <el-dialog v-model="isShowCheckDialog" :title="checkDialogTitle" width="640" @close="checkDialogClose">
      <div class="check_dialog_box">
        <el-form :model="checkFormData" :rules="checkFormRules" ref="checkFormRef" label-width="auto" style="max-width: 600px">
          <el-form-item label="实验室房间号">
            <el-input style="width: 220px" v-model="checkFormData.reservationHome" placeholder="请输入实验室房间号" />
          </el-form-item>
          <el-form-item label="预约仪器">
            <el-input style="width: 220px" v-model="checkFormData.reservationDev" placeholder="请输入预约仪器" />
          </el-form-item>
          <el-form-item label="预约时间">
            <!-- <el-input v-model="checkFormData.checkDesc" /> -->
            <el-date-picker
              v-model="checkFormData.time"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item label="审核结果" prop="checkResult" style="margin-top: 30px">
            <el-check-tag
              class="pass_tag"
              :checked="checkFormData.checkResult == 1"
              type="success"
              @change="tagPassChange"
              :disable-transitions="true"
            >
              <i class="iconfont icon-pass-2-copy"></i>
              通过
            </el-check-tag>
            <el-check-tag
              class="not_pass_tag"
              :checked="checkFormData.checkResult == 2"
              type="danger"
              @change="tagNotPassChange"
              :disable-transitions="true"
            >
              <i class="iconfont icon-butongguo"></i>
              不通过
            </el-check-tag>
          </el-form-item>

          <el-form-item label="审核备注" style="margin-top: 30px">
            <el-input
              v-model="checkFormData.checkDesc"
              :autosize="{ minRows: 4, maxRows: 6 }"
              type="textarea"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="checkDialogCancelClick">取消</el-button>
          <el-button type="primary" @click="checkDialogConfirmClick"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 导出数据弹窗 -->
    <el-dialog v-model="isShowExportDialog" title="导出数据" width="640" @close="exportDialogClose">
      <div class="export_dialog_box">
        <el-form :model="exportFormData" ref="exportFormRef" label-width="auto" style="max-width: 600px">
          <el-form-item label="学生工号">
            <el-input v-model="exportFormData.studentCode" style="width: 180px" placeholder="请输入学生工号" />
          </el-form-item>
          <el-form-item label="学生姓名">
            <el-input v-model="exportFormData.studentName" style="width: 180px" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="实验室房间号">
            <el-input v-model="exportFormData.reservationHome" style="width: 180px" placeholder="请输入实验室房间号" />
            <!-- <el-select
              v-model="exportFormData.reservationHome"
              filterable
              placeholder="请选择实验室房间号"
              style="width: 180px"
              clearable
            >
              <el-option v-for="(ll, indexL) in labList" :key="indexL" :label="ll.laboratoryHome" :value="ll.laboratoryHome" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="预约仪器">
            <el-input v-model="exportFormData.reservationDev" style="width: 180px" placeholder="请输入预约仪器" />
            <!-- <el-select v-model="exportFormData.reservationDev" filterable placeholder="请选择仪器" style="width: 160px" clearable>
              <el-option v-for="(dl, indexD) in devList" :key="indexD" :label="dl.label" :value="dl.value" />
            </el-select> -->
          </el-form-item>

          <el-form-item label="审核状态">
            <el-select v-model="exportFormData.checkResult" filterable placeholder="请选择状态" style="width: 120px" clearable>
              <el-option v-for="(csl, indexC) in checkStatusList" :key="indexC" :label="csl.label" :value="csl.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="预约时间">
            <el-date-picker
              v-model="exportFormData.date"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="exportDialogCancelClick">取消</el-button>
          <el-button type="primary" @click="exportDialogConfirmClick"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref } from "vue";
import { Search, UploadFilled } from "@element-plus/icons-vue";
import "./index.scss";
export default defineComponent({
  name: "AuditModule"
});
</script>
<script lang="ts" setup>
import { AppointListType } from "@/api/modules/appointment/type";
import { labListType } from "@/views/laboratoryList/type";
import _ from "lodash";
import { selectAllLabApi } from "@/api/modules/laboratoryList/index";
import { selectAllDevApi } from "@/api/modules/instrumentList/index";
import { selectByPageApi, checkReservationApi, exportExcelApi } from "@/api/modules/appointment/index";
import { ElMessage } from "element-plus";
import FileSaver from "file-saver";
import { getNotSymbolDate } from "@/utils/date";

// import { v4 as uuidv4 } from "uuid";

interface checkFormDataType {
  reservationId?: number;
  checkPeople: string;
  // 预约时间-开始
  startTime: string;
  // 预约时间-结束
  endTime: string;
  // 预约时间
  time: string;
  // 实验室房间号
  reservationHome: string;
  // 预约仪器
  reservationDev: string;
  // 备注
  checkDesc: string;
  // 结果
  checkResult?: string | number;
}

// 显示审核预约弹窗的标识
const isShowCheckDialog = ref(false);

// 审核弹窗标题
const checkDialogTitle = ref("");

// 审核表单数据
const checkFormData = ref<checkFormDataType>({
  reservationId: null,
  checkPeople: "",
  // 预约时间-开始
  startTime: "",
  // 预约时间-结束
  endTime: "",
  // 预约时间
  time: "",
  // 实验室房间号
  reservationHome: "",
  // 预约仪器
  reservationDev: "",
  // 备注
  checkDesc: "",
  // 结果
  checkResult: null
});

// 审核表单校验规则
const checkFormRules = ref({
  checkResult: [{ required: true, message: "请选择审核结果", trigger: "blur" }],
  reservationHome: [{ required: true, message: "请输入实验室房间号", trigger: "blur" }],
  reservationDev: [{ required: true, message: "请输入预约仪器", trigger: "blur" }],
  startTime: [{ required: true, message: "请选择预约时间", trigger: "blur" }]
});

// 通过tag change事件
const tagPassChange = e => {
  if (e) {
    checkFormData.value.checkResult = 1;
  } else {
    checkFormData.value.checkResult = null;
  }
};

// 不通过tag change事件
const tagNotPassChange = e => {
  if (e) {
    checkFormData.value.checkResult = 2;
  } else {
    checkFormData.value.checkResult = null;
  }
};

// 审核表单Ref
const checkFormRef = ref(null);

// 审核按钮点击事件
const checkBtnClick = row => {
  console.log(row);
  isShowCheckDialog.value = true;
  checkDialogTitle.value = `审核-${row.studentName}提交的预约申请`;
  checkFormData.value.reservationId = row.reservationId;
  checkFormData.value.reservationDev = row.reservationDev;
  checkFormData.value.reservationHome = row.reservationHome;
  checkFormData.value.time = [row.startTime, row.endTime];
};

// 重置审核表单数据
const resetCheckFormData = () => {
  checkFormData.value = {
    reservationId: null,
    checkPeople: "",
    checkDesc: "",
    checkResult: null
  };
  checkFormRef.value.resetFields();
};

// 审核弹窗关闭事件
const checkDialogClose = () => {
  isShowCheckDialog.value = false;
  resetCheckFormData();
};

// 审核弹窗取消点击事件
const checkDialogCancelClick = () => {
  isShowCheckDialog.value = false;
  resetCheckFormData();
};

// 审核弹窗确定点击事件
const checkDialogConfirmClick = () => {
  checkFormRef.value.validate((valid, fields) => {
    console.log(checkFormData.value);
    if (valid) {
      console.log("submit!");
      checkReservationFunc();
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 审核请求函数
const checkReservationFunc = async () => {
  let data = {
    reservationId: checkFormData.value.reservationId,
    checkPeople: checkFormData.value.checkPeople,
    time: checkFormData.value.time,
    reservationHome: checkFormData.value.reservationHome,
    reservationDev: checkFormData.value.reservationDev,
    checkDesc: checkFormData.value.checkDesc,
    checkResult: checkFormData.value.checkResult,
    startTime: "",
    endTime: ""
  };
  data.startTime = data.time ? data.time[0] : "";
  data.endTime = data.time ? data.time[1] : "";
  delete data.time;
  // let data = _.cloneDeep(checkFormData.value);
  let userInfo = JSON.parse(localStorage.getItem("geeker-user")).userInfo;
  data.checkPeople = userInfo.name;
  console.log("#审核数据", data);

  await checkReservationApi(data)
    .then(res => {
      if (res.result == "success") {
        ElMessage.success("审核提交成功!");
        isShowCheckDialog.value = false;
      } else if (res.result == "error") {
        ElMessage.error(res.msg);
      }
    })
    .finally(() => {
      selectByPageFunc();
    });
};

// 导出表单数据类型
interface ExportFormDataType {
  studentName: string;
  studentCode: string;
  startReservationDate: string;
  endReservationDate: string;
  reservationHome: string;
  reservationDev: string;
  checkResult: string;
  date: string | string[];
}

// 导出表单数据
const exportFormData = ref<ExportFormDataType>({
  studentName: "",
  studentCode: "",
  startReservationDate: "",
  endReservationDate: "",
  reservationHome: "",
  reservationDev: "",
  checkResult: "",
  date: []
});
/// 重置导出表单数据
const resetExportFormData = () => {
  exportFormData.value = {
    studentName: "",
    studentCode: "",
    startReservationDate: "",
    endReservationDate: "",
    reservationHome: "",
    reservationDev: "",
    checkResult: "",
    date: []
  };
};

// 导出表单Ref
const exportFormRef = ref(null);

// 显示导出表单弹窗的标识
const isShowExportDialog = ref(false);

// 导出数据表单弹窗关闭事件
const exportDialogClose = () => {
  resetExportFormData();
};

// 导出数据表单弹窗确定点击事件
const exportDialogConfirmClick = () => {
  // let flag = true;
  // if (flag) return;

  exportExcelFunc();
};

// 导出数据表单弹窗取消点击事件
const exportDialogCancelClick = () => {
  isShowExportDialog.value = false;
};

// 下载Excel表格的事件
const exportExcelFunc = async () => {
  // let data = exportExcelConditionData.value;
  let data = _.cloneDeep(exportFormData.value);
  data.startReservationDate = data.date[0];
  data.endReservationDate = data.date[1];
  delete data.date;
  console.log("导出提交数据", data);

  await exportExcelApi(data)
    .then(res => {
      console.log(res);
      FileSaver.saveAs(res, `预约实验室${getNotSymbolDate()}`);
      ElMessage.success("导出成功,等待下载!");
    })
    .catch(err => {
      ElMessage.error("导出失败!");
    })
    .finally(() => {
      isShowExportDialog.value = false;
    });
};

// 导出数据点击事件
const exportDataClick = () => {
  console.log("#导出数据");
  isShowExportDialog.value = true;
};

// 预约查询表单数据
const queryAppointmentFormData = reactive({
  // 学生工号
  studentCode: "",
  // 学生姓名
  studentName: "",
  // 开始预约时间
  startReservationDate: "",
  // 结束预约时间
  endReservationDate: "",
  // 预约实验室房间号
  reservationHome: "",
  // 预约仪器
  reservationDev: "",
  // 审核状态
  checkResult: "",
  // 页码
  page: 1,
  // 每页条数
  size: 10,

  // 时间
  date: []
});

// 实验室列表
const labList = ref<labListType>([]);

// 仪器列表
const devList = ref<
  {
    label: string;
    value: string;
  }[]
>([]);

// 审核状态
const checkStatusList = ref([
  {
    label: "通过",
    value: 1
  },
  {
    label: "不通过",
    value: 2
  },
  {
    label: "待审核",
    value: 0
  }
]);

// 查看名单表格每页条数
const lookTableSize = ref(10);

/* 化学药品预约使用名单 */

// 是否显示化学药品预约使用名单的弹窗标识
const isShowLookChemicalDrugsDialog = ref(false);

// 当前查看药品列表
const currentLookChemicalDrugs = ref([]);

// 当前查看药品表格页码
const currentLookChemicalDrugsPage = ref(1);

// 当前查看药品显示列表
const currentShowLookChemicalDrugs = computed(() => {
  let startIndex = (currentLookChemicalDrugsPage.value - 1) * lookTableSize.value;
  let yData = _.cloneDeep(currentLookChemicalDrugs.value);
  let rData = yData.slice(startIndex, startIndex + 10);
  console.log("rData", startIndex, yData, rData);
  return rData;
});

/* 所有学生名单 */

// 是否显示学生名单的弹窗标识
const isShowLookAllStudentDialog = ref(false);

// 当前查看学生名单列表
const currentLookAllStudent = ref([]);

// 当前查看学生名单表格页码
const currentLookAllStudentPage = ref(1);

// 当前查看学生名单显示列表
const currentShowLookAllStudent = computed(() => {
  let startIndex = (currentLookAllStudentPage.value - 1) * lookTableSize.value;
  let yData = _.cloneDeep(currentLookAllStudent.value);
  let rData = yData.slice(startIndex, startIndex + 10);
  console.log("rData", startIndex, yData, rData);
  return rData;
});

//  预约列表
const appointList = ref<AppointListType>([]);

// 预约表格总条数
const tableTotal = ref(0);

// 预约列表加载标识
const isAppointListLoading = ref(false);

// 查看药品点击事件
const lookDrugClick = row => {
  currentLookChemicalDrugs.value = _.cloneDeep(row.chemicalDrugs);
  console.log(currentLookChemicalDrugs.value);
  isShowLookChemicalDrugsDialog.value = true;
};

// 查看药品弹窗关闭点击事件
const lookChemicalDrugsDialogCloseClick = () => {
  isShowLookChemicalDrugsDialog.value = false;
};

// 查看药品弹窗表格分页器change事件
const lookChemicalPaginationChange = e => {
  currentLookChemicalDrugsPage.value = e;
};

// 查看文档点击事件
const lookDocClick = row => {
  downloadFile(row.experimentFileUrl);
};

function downloadFile(url) {
  const link = document.createElement("a");
  link.href = url;
  link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
  link.click();
}

// 查看学生名单点击事件
const lookStudentsClick = row => {
  currentLookAllStudent.value = _.cloneDeep(row.allStudent);
  console.log(currentLookAllStudent.value);
  isShowLookAllStudentDialog.value = true;
};

// 查看学生名单弹窗关闭点击事件
const lookAllStudentDialogCloseClick = () => {
  isShowLookAllStudentDialog.value = false;
};

// 查看学生名单表格分页器change事件
const lookAllStudentPaginationChange = e => {
  currentLookAllStudentPage.value = e;
};

// 查询所有实验室
const selectAllLabFunc = async () => {
  await selectAllLabApi().then(res => {
    if (res.result == "success") {
      labList.value = res.data;
    }
  });
};

// 查询所有仪器
const selectAllDevFunc = async () => {
  await selectAllDevApi().then(res => {
    if (res.result == "success") {
      let nDevList = [];
      res.data.forEach(item => {
        nDevList.push({
          label: `#${item.devCode} ${item.devName} (${item.devType})`,
          value: `${item.devName}`
        });
      });
      // nDevList = [...new Set(nDevList)];
      devList.value = nDevList.map(item => {
        return {
          label: item.label,
          value: item.value
        };
      });
      console.log("#仪器去重列表", devList);
    }
  });
};

// 查询预约点击事件
const selectAppointmentClick = () => {
  queryAppointmentFormData.page = 1;
  selectByPageFunc();
};

// 分页器change事件
const paginationChange = e => {
  queryAppointmentFormData.page = e;
  selectByPageFunc();
};

// 分页查询预约审核列表
const selectByPageFunc = async () => {
  let data = queryAppointmentFormData;
  data.startReservationDate = data.date ? data.date[0] : "";
  data.endReservationDate = data.date ? data.date[1] : "";
  console.log("#查询", data);
  await selectByPageApi(data).then(res => {
    if (res.result == "success") {
      // 处理数据格式
      res.data.list.forEach(item => {
        // 预约化学药品名单处理
        let newChemicalDrugs = item.chemicalDrugs.split(",").map((chemical, indexC) => {
          return {
            num: indexC,
            chemicalName: chemical
          };
        });
        item.chemicalDrugs = newChemicalDrugs;

        // 学生名单处理
        let newAllStudent = item.allStudent ? item.allStudent.split(";") : [];
        if (newAllStudent.length != 0) {
          newAllStudent = newAllStudent.map((studentItem, indexS) => {
            let student = studentItem.split(",");
            return {
              num: indexS,
              studentNum: student[0],
              studentName: student[1],
              studentPhone: student[2]
            };
          });
        }
        item.allStudent = newAllStudent;
        console.log("#学生名单", newAllStudent);
      });

      // 赋值
      appointList.value = res.data.list;
      tableTotal.value = res.data.total;
    }
  });
};

// init
onMounted(() => {
  selectByPageFunc();
  selectAllLabFunc();
  selectAllDevFunc();
});
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
